import React from 'react';

const ListItem: React.FC<{
  text: string,
  time: string,
  id: string,
  handleDel: (key: string) => void,
  handleEdit: (key: string) => void
}> = (props) => {
  const {text, time, handleDel, handleEdit, id: key} = props;
  return (
    <li className="todo-item">
      <div>
        <p>{text}</p>
        <p className="time">{time}</p>
      </div>
      <div>
        <span
          className="action edit"
          onClick={() => handleEdit(key)}
        >
          编辑
        </span>
        <span
          className="action"
          onClick={() => handleDel(key)}
        >
          删除
        </span>
      </div>
    </li>
  );
}

export default ListItem;